<template>
  <view class="login-box">
    <view  class="logo">
      骑手中心
    </view>
<!--    <image class="logo" src="../../static/xsd.jpg" mode="widthFix"></image>-->
    <div class="logoText">
      <u-form :model="form" ref="uForm" >
        <u-form-item label="手机号码" label-width="180" prop="mobile" required>
          <u-input v-model="form.mobile" maxlength="11" placeholder="请输入手机号码" />
        </u-form-item>
        <u-form-item prop="verifyCode">
          <u-input v-model="form.verifyCode" maxlength="6" placeholder="请输入手机验证码" />
          <u-toast ref="uToast"></u-toast>
          <u-verification-code :seconds="seconds" ref="uCode" @change="codeChange"
                               start-text="获取验证码"></u-verification-code>
          <view style="color: #5FC484;" @tap="getCode">{{ tips }}</view>
        </u-form-item>
        <u-form-item label="身份证号" label-width="180" prop="idCard" required>
          <u-input v-model="form.idCard" maxlength="18" placeholder="请输入身份证号" />
        </u-form-item>
      </u-form>
      <view style="padding: 30rpx;color: #fff;font-size:28rpx;">
        在本页面填写的所有有效信息，在不被允许的情况下，不会私自将您的消息泄露。
      </view>
<!--      <u-input  v-model="value" :type="type" :border="border"  :placeholder-style="'color: #c0c4cc;'"  placeholder="请输入手机号"/>-->
    </div>
    <view class="buttonDiv">
<!--      <button class="button other" @click="loginTokenFunc">一键登录全屏</button>-->
<!--      <button class="button other" @click="popLoginTokenFunc">一键登录弹窗</button>-->
<!--      <button class="button other" @click="popBottomLoginTokenFunc">一键登录底部弹窗</button>-->
      <button class="button last" @click="verificationPhoneNumberFunc">登录</button>
      <text class="bottomText">————新速达提供技术支持————</text>
    </view>
  </view>
</template>

<script>
export default {
  name: "webIndex-login",
  data() {
    return {
      form: {
        mobile: "",
        verifyCode: "",
      },
      rules: {
        idCard: [{
            required: true,
            message: '请输入身份证',
            trigger: ['blur','change'],
          },
          {
            // 自定义验证函数
            validator: (rule, value, callback) => {
              // 返回true表示校验通过，返回false表示不通过
              return this.$u.test.idCard(value)
            },
            message: '身份证不正确',
            // 触发器可以同时用blur和change
            trigger: ['blur','change'],
          }
        ],
        mobile: [{
            required: true,
            message: '请输入手机号',
            trigger: ['blur','change'],
        },],
        verifyCode: [{
            required: true,
            message: '请输入验证码',
            trigger: ['blur','change'],
        },],

      },
      code: '',
      tips: '',
      value: '',
      type: 'number',
      border: true,
      seconds: 60,
      doubleClick:false,
      isStudy:'0',
    }
  },
  // 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
	onReady() {
		this.$refs.uForm.setRules(this.rules);
	},
  async onLoad(option) {
    if (option.isStudy == '1') {
       this.isStudy = option.isStudy
    }

    if (uni.getStorageSync('loginTime')&& !this.isOver24Hours(uni.getStorageSync('loginTime'))) {
      this.form.mobile = uni.getStorageSync('mobile')
      this.form.idCard = uni.getStorageSync('idCard')
      if (this.isStudy == '1') {
        let data  =  uni.getStorageSync('riderInfo')
        uni.reLaunch({
          url: `/pages/rider-center/webIndex-study?mobile=${this.form.mobile}&type=${data.question?1:0}`
        })
        return
      }
      //咨询中心
      uni.reLaunch({
        url: `/pages/rider-center/webIndex-consult?mobile=${this.form.mobile}&idCard=${this.form.idCard}`
      })
    }

  },
  methods: {
    async verificationPhoneNumberFunc(){
      this.$refs.uForm.validate(async(valid) => {
        if (valid) {
          console.log('身份证验证通过，提交的数据：', this.form);
          if (this.doubleClick == true) return
          this.doubleClick = true
          let { code, msg } = await this.$api.verify.verifyPhoneCode(this.form).catch(()=>{
            this.doubleClick = false
          });
          this.doubleClick = false
          if (msg != null && code === 200) {
            this.$u.toast('验证成功');
            //学习中心
            this.form.ridersPhone = this.form.mobile;
            let { data } = await this.$api.dormitory.getRidersPhoneInfo(this.form);
            if (this.isStudy == '1') {
              uni.setStorageSync('riderInfo',data)
              if (data.ridersId) {
                let loginTime = new Date()
                uni.setStorageSync('loginTime',loginTime)
                uni.setStorageSync('mobile',this.form.mobile)
                uni.setStorageSync('idCard',this.form.idCard)
              }
              uni.reLaunch({
                url: `/pages/rider-center/webIndex-study?mobile=${this.form.mobile}&type=${data.question?1:0}`
              })
            } else {
              //咨询中心
              if (data.ridersId) {
                let loginTime = new Date()
                uni.setStorageSync('loginTime',loginTime)
              }
              uni.setStorageSync('mobile',this.form.mobile)

              uni.reLaunch({
                url: `/pages/rider-center/webIndex-consult?mobile=${this.form.mobile}&idCard=${this.form.idCard}`
              })
          }
        }
        } else {
          console.log('身份证验证失败');
        }
      });

    },
    isOver24Hours(passedTime) {
      // 获取当前时间
      const currentTime = new Date();

      // 将传入的时间转换为 Date 对象
      const passedDate = new Date(passedTime);

      // 计算时间差（单位是毫秒）
      const timeDifference = currentTime - passedDate;

      // 将毫秒转化为小时并比较是否超过24小时
      const hoursDifference = timeDifference / (1000 * 60 * 60); // 毫秒转换为小时

      // 判断是否超过24小时
      return hoursDifference > 24;
    },
    codeChange(text) {
      this.tips = text;
    },
    async getCode() {
      uni.setStorageSync("token", "");
      if (!this.$u.test.mobile(this.form.mobile)) {
        this.$u.toast('请输入正确的手机号');
      } else {
        if (this.$refs.uCode.canGetCode) {
          // 向后端请求验证码
          let { code, msg } = await this.$api.verify.phoneCode(this.form);
          if (code == 200) {
            uni.hideLoading();
            // 这里此提示会被this.start()方法中的提示覆盖
            this.$u.toast('验证码已发送');
            // 通知验证码组件内部开始倒计时
            this.$refs.uCode.start();
          } else {
            this.$u.fail('发送失败，请重试')
          }
        } else {
          this.$u.toast('倒计时结束后再发送');
        }
      }
    },
  }
}
</script>

<style scoped>
 .login-box{
   width: 100%;
   height: 100vh;
   background-image: linear-gradient(to bottom, #257FFF, #fff);
   position: fixed;
 }

 /deep/.u-input{
   background-color: white;
 }

 /deep/.u-input__input{
   height: 100rpx;
 }

 /deep/.u-form{
   background-color: white;
   border-radius: 10px;
   padding:0 30rpx ;
 }

 .logo {
   padding-left: 5px;
   display: block;
   margin: 150rpx auto 0rpx auto;
   width: 100%;
   height: 48px;
   font-size: 100rpx;
   text-align: center;
   color: white;
   font-weight: bold;
   letter-spacing: 10px;
 }

 .logoText {
   margin: 100rpx auto 70px auto;
   width: 90%;
   text-align: center;
   font-size: 24px;
   color: black;
 }

 .buttonDiv {
   position: fixed;
   /* position: absolute; */
   bottom: env(safe-area-inset-bottom);  
   bottom: 44px;
   width: 100%;
   height: auto;
 }

 .button {
   border-radius: 10px;
   width: 90%;
   height: 56px;
   margin: 10px auto;
   font-size: 17px;
   line-height: 56px;
 }

 .other {
   background-color: white;
   border: 1px solid red;
   color: red;
 }

 .last {
   background-color: #3287FF;
   color: white;
 }

 .bottomText {
   display: inline-block;
   margin: 50px auto 0 auto;
   width: 100%;
   height: 16px;
   text-align: center;
   font-size: 15px;
   color: lightgray;
 }
</style>
